<template>
  <div class="contact-picker">
    <div class="picker-trigger" @click="toggleDropdown">
      <div class="selected-content">
        <User :size="16" class="trigger-icon" />
        <span class="selected-text">
          {{ selectedContact ? selectedContact.name : '选择好友' }}
        </span>
      </div>
      <ChevronDown :size="16" class="chevron" :class="{ rotated: isOpen }" />
    </div>
    <div v-if="isOpen" class="dropdown-overlay" @click="closeDropdown"></div>
    <div v-if="isOpen" class="dropdown-content">
      <div class="search-section">
        <Search :size="16" class="search-icon" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索好友..."
          class="search-input"
          @input="handleSearch"
        />
      </div>

      <div class="contact-list">
        <div
          v-for="contact in filteredContacts"
          :key="contact.id"
          class="contact-item"
          :class="{ selected: selectedContact?.id === contact.id }"
          @click="selectContact(contact)"
        >
          <div class="contact-avatar">
            <User :size="16" />
          </div>
          <div class="contact-info">
            <div class="contact-name">{{ contact.name }}</div>
          </div>
        </div>
      </div>

      <div v-if="filteredContacts.length === 0" class="no-results">没有找到匹配的好友</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Search, User, ChevronDown } from 'lucide-vue-next'

interface Contact {
  id: string
  name: string
  fileCount: number
}

interface Props {
  modelValue?: Contact | null
}

interface Emits {
  (e: 'update:modelValue', value: Contact | null): void
  (e: 'change', value: Contact | null): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null
})

const emit = defineEmits<Emits>()

// 模拟联系人数据
const contacts = ref<Contact[]>([
  { id: '1', name: '张三', fileCount: 6 },
  { id: '2', name: '李四', fileCount: 6 },
  { id: '3', name: '王五', fileCount: 5 },
  { id: '4', name: '赵六', fileCount: 4 },
  { id: '5', name: '钱七', fileCount: 3 },
  { id: '6', name: '孙八', fileCount: 0 }
])

const searchQuery = ref('')
const selectedContact = ref<Contact | null>(props.modelValue)
const isOpen = ref(false)

const filteredContacts = computed(() => {
  if (!searchQuery.value.trim()) {
    return contacts.value
  }

  const query = searchQuery.value.toLowerCase()
  return contacts.value.filter((contact) => contact.name.toLowerCase().includes(query))
})

const toggleDropdown = (): void => {
  isOpen.value = !isOpen.value
  if (isOpen.value) {
    searchQuery.value = ''
  }
}

const closeDropdown = (): void => {
  isOpen.value = false
}

const handleSearch = (): void => {
  // 搜索逻辑已在 computed 中处理
}

const selectContact = (contact: Contact): void => {
  selectedContact.value = contact
  emit('update:modelValue', contact)
  emit('change', contact)
  closeDropdown()
}

// 点击外部关闭下拉框
const handleClickOutside = (event: Event): void => {
  const target = event.target as HTMLElement
  if (!target.closest('.contact-picker')) {
    closeDropdown()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.contact-picker {
  position: relative;
  width: 200px;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  background-color: var(--background-color-secondary);
  color: var(--text-color-primary);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.picker-trigger:hover {
  border-color: var(--primary-color);
}

.selected-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.trigger-icon {
  color: var(--text-color-secondary);
}

.selected-text {
  font-size: 14px;
  font-weight: 500;
}

.file-count {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.chevron {
  color: var(--text-color-secondary);
  transition: transform 0.3s ease;
}

.chevron.rotated {
  transform: rotate(180deg);
}

.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  margin-top: 4px;
  background-color: var(--background-color-secondary);
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid var(--border-color-light);
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color-secondary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 8px 8px 36px;
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  background-color: var(--background-color-primary);
  color: var(--text-color-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: var(--primary-color);
}

.search-input::placeholder {
  color: var(--text-color-secondary);
}

.contact-list {
  max-height: 200px;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-color-light);
}

.contact-item:hover {
  background-color: var(--background-color-tertiary);
}

.contact-item.selected {
  background-color: var(--primary-color);
  color: white;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--background-color-primary);
  margin-right: 12px;
  color: var(--text-color-secondary);
}

.contact-item.selected .contact-avatar {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 2px;
}

.contact-files-count {
  font-size: 12px;
  opacity: 0.7;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-color-secondary);
  font-size: 14px;
}
</style>
